<template>
修改个人信息
 <el-form @submit.enter.prevent="onenter" :model="form">
        <el-form-item label="Username" >
            <el-input v-model="form.username" @change="checkUsername"/>
            {{ form.message_username }}
        </el-form-item>
        <el-form-item label="Password" >
            <el-input type="password" v-model="form.password" />
        </el-form-item>
         <el-form-item label="Email" >
            <el-input v-model="form.email" @change="checkEmail"/>
            {{ form.message_email }}
        </el-form-item>
         <el-form-item label="Phone" >
            <el-input v-model="form.phone" @change="checkPhone"/>
            {{ form.message_phone }}
        </el-form-item>
        <el-form-item label="Firstname">
            <el-input v-model="form.firstname" />
        </el-form-item>
        <el-form-item label="Lastname">
            <el-input v-model="form.lastname" />
        </el-form-item>
        <el-form-item label="city">
            <el-input v-model="form.city" />
        </el-form-item>
        <el-form-item label="state" >
            <el-input v-model="form.state" />
        </el-form-item>
        <el-form-item label="address1" >
            <el-input v-model="form.addr1" />
        </el-form-item>
        <el-form-item label="address2" >
            <el-input v-model="form.addr2" />
        </el-form-item>
        <el-form-item>
      <el-button @click="onSubmit">Submit</el-button>
    </el-form-item>
</el-form>
</template>

<script>

import { reactive, ref, onMounted } from "vue"
import axios from "axios"
import { ElMessage } from "element-plus"
import { useStore } from 'vuex';
var userid=sessionStorage.getItem("username")
console.log("userid"+userid)
export default {
    name: "modify",
    setup() {
        const store = useStore();
        console.log(store.state.userInfo);
        const form = ref({})
        onMounted(() => {
            form.value = store.state.userInfo;
        })
        const onenter = () => {
            console.log("enter");
        }
       let email = ref(false), username = ref(false), phone = ref(false);


       const checkUsername = async () => {
            try {
                const usernameExist = await axios.get("/account/checkusername", {
                params: {
                    username: form.value.username
                }
                });
                console.log(usernameExist.data);
            if(usernameExist.data.status == 0) {
                // console.log("username is available");
                username.value = true;
                form.value.message_username = usernameExist.data.msg;
            } else{
                form.value.message_username = usernameExist.data.msg;
                console.log(form.value.message_username);
            }
            } catch (error) {
                console.log(error);
                ElMessage.error(error.response.data);
            }
            
        }
        const redirect = () => {
            console.log("/logg/" + userid)
            router.push({ path: "/logg/" + userid });
            // location.reload();
        }
        const checkEmail = async() => {
            try{
                const emailExist = await axios.get("/account/checkemail",{
                    params:{
                        email: form.value.email
                    }
                });
                if (emailExist.data.status == 0) {
                    email.value = true;
                    form.value.message_email = emailExist.data.msg;
                }else{
                     form.value.message_email = emailExist.data.msg;
                }
            }catch(error){
                console.log(error);
                ElMessage.error(error.response.data);
            }
        }

        const checkPhone = async() => {
            try{
                const phoneExist = await axios.get("/account/checkphone",{
                    params:{
                        phone: form.value.phone
                    }
                });
                if (phoneExist.data.status == 0) {
                    phone.value = true;
                    form.value.message_phone = phoneExist.data.msg;
                }else{
                    form.value.message_phone = phoneExist.data.msg;
                }
            }catch(error){
                console.log(error);
                ElMessage.error(error.response.data);
            }
        }

        const onSubmit = () => {
            console.log("submit");
            if(email && username && phone){
                return axios.post( "/account/modify", form.value).then(res=>{
                if(res.data.status == 0){
                     ElMessage({
                    message: res.data.msg,
                    type:'success'
                    });
                }else{
                     ElMessage({
                    message: res.data.msg,
                    type:'warning'
                });
                }
                 console.log(res);
            }).catch(e => {
                 console.log(e);
            })
            }
           
        }
        return {
            form,
            redirect,
            onSubmit,
            onenter,
            checkEmail,
            checkPhone,
            checkUsername,
            username,
            userid,
            email,
            phone,
            store
        }
    }
}
</script>